<script setup>
import HomePannel from './HomePannel.vue';
import { getHomeLikeAPI } from '@/api/home'
import { ref } from 'vue';

const likeList = ref([])

const getLikeList= async () => {
  const res = await getHomeLikeAPI()
  likeList.value = res
}

getLikeList()

const isMoved = ref(false)

const Move = () => {
  isMoved.value = !isMoved.value
}

</script>

<template>
<div class="homelike">
  <div class="container">
    <home-pannel title="热门品牌" desc="国际经典 品质认证">
      <div class="btn">
        <button class="prev" :disabled="!isMoved" @click="Move">&lt;</button>
        <button class="next" :disabled="isMoved" @click="Move">&gt;</button>
      </div>
      <ul class="goodslist" :class="{ move: isMoved }">
        <li v-for="item in likeList" :key="item.id">
          <router-link to="/">
            <img :src="`${item.picture}`" alt="">
            <div class="name">{{ item.name }}</div>
            <div class="desc">{{ item.desc }}</div>
          </router-link>
        </li>
      </ul>
    </home-pannel>
  </div>
</div>
</template>

<style lang="less" scoped>
.homelike {
  height: 470px;
  background-color: #f5f5f5;
  .container {
    overflow: hidden;
  }
  .btn {
    float: right;
    button {
      height: 20px;
      width: 20px;
      background-color: #00be9a;
      border: 0;
      outline: none;
      color: #fff;
      cursor: pointer;
      &:nth-child(2) {
        margin-left: 12px;
      }
      &:disabled {
        background-color: #e2e2e2;
      }
    }
  }
  .goodslist {
    margin-top: 40px;
    width: 2490px;
    height: 300px;
    li {
      float: left;
      width: 240px;
      margin-left: 10px;
      &:nth-child(1) {
        margin-left: 0;
      }
      &:hover {
        transition: all .5s;
        transform: translateY(-3px);
        box-shadow: 0px 0px 5px rgba(0, 0, 0, .3);
      }
      a {
        display: block;
        position: relative;
        text-align: center;
        img {
          width: 240px;
          height: 300px;
        }
        .name {
          position: absolute;
          bottom: 40px;
          left: 50%;
          transform: translateX(-50%);
          display: inline-block;
          padding: 0 16px;
          height: 36px;
          line-height: 36px;
          font-size: 20px;
          font-weight: 300;
          color: @xtxColor;
          background-color: #fff;
          border-radius: 20px;
          z-index: 2;
          border: 1px solid #ccc;
          border-bottom: 0;
          box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
          white-space: nowrap;
        }
        .desc {
          position: absolute;
          bottom: 0;
          left: 0;
          height: 60px;
          font-size: 16px;
          width: 100%;
          color: #8d655e;
          background-color: #fff;
          border-radius: 20px 20px 0 0;
          line-height: 80px;
          box-shadow: 0 0 3px rgba(0, 0, 0, .1);
        }
      }
    }
  }
}
.move {
  transform: translateX(-1250px);
}
</style>